<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="lib/react.development.js"></script>
    <script src="lib/react-dom.development.js"></script>
    <script src="lib/babel.min.js"></script>
</head>

<body>
    <div id="root"></div>
</body>
<script type="text/babel">
    // 表单需要了解两个地方：
    //  1- 如何收集表单数据
    //  2- 如何设置表单初始值
    // 受控组件：需要为其增加onChnage事件，该事件负责更新数据状态（因为组件的值受到数据状态的影响 ）
    const root = ReactDOM.createRoot(document.querySelector('#root'))
    class App extends React.Component {
        state = {
            userName: 'zhangsan',
            passWord: 12345,
            city: 3,
            sex: '1',
            hobby: ['1', '2', '3']
        }
        changeHandler(e) {
            if (e.target.type === 'checkbox') {
                // 复制状态给予常量copyState
                const copyState = [...this.state[e.target.name]];
                // 根据选中的value为条件去数组中查找满足条件的下标
                const index = copyState.findIndex(v => v === e.target.value);
                // 如果找到了
                if (index > -1) copyState.splice(index, 1);
                else copyState.push(e.target.value);

                this.setState({
                    [e.target.name]: copyState
                })
            } else {
                this.setState({
                    [e.target.name]: e.target.value
                })
            }




        }

        submitHandler(e) {
            e.preventDefault()
            console.log('userName', this.state.userName)
            console.log('passWord', this.state.passWord)
            console.log('city', this.state.city)
            console.log('sex', this.state.sex)
        }

        render() {
            return (
                <form onSubmit={this.submitHandler.bind(this)}>
                    <p>用户名：<input onChange={this.changeHandler.bind(this)} name='userName' type="text" value={this.state.userName} /></p>
                    <p>密码：<input onChange={this.changeHandler.bind(this)} name='passWord' type="passWord" value={this.state.passWord} /></p>
                    <p>
                        所在城市：
                        <select name='city' onChange={this.changeHandler.bind(this)} value={this.state.city}>
                            <option value="1">北京</option>
                            <option value="2">上海</option>
                            <option value="3">武汉</option>
                            <option value="4">西安</option>
                            <option value="5">深圳</option>
                            <option value="6">南白滩</option>
                        </select>
                    </p>
                    <p>
                        性别：
                        <input type="radio" onChange={this.changeHandler.bind(this)} checked={this.state.sex === '1'} name='sex' value={1} />男
                        <input type="radio" onChange={this.changeHandler.bind(this)} checked={this.state.sex === '2'} name='sex' value={2} />女
                    </p>
                    <p>
                        爱好：
                        <input type="checkbox" name='hobby' onChange={this.changeHandler.bind(this)} checked={this.state.hobby.includes('1')} value={1} />学习
                        <input type="checkbox" name='hobby' onChange={this.changeHandler.bind(this)} checked={this.state.hobby.includes('2')} value={2} />电影
                        <input type="checkbox" name='hobby' onChange={this.changeHandler.bind(this)} checked={this.state.hobby.includes('3')} value={3} />游戏
                        <input type="checkbox" name='hobby' onChange={this.changeHandler.bind(this)} checked={this.state.hobby.includes('4')} value={4} />视频
                    </p>


                    <button>提交</button>
                </form>



            )
        }


    }





    root.render(<App />)
</script>

</html>